﻿@{
    ViewBag.Title = "ListMediaType";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}


@section scripts
{
    <script type="text/javascript" src="~/Scripts/App/Admin/mediatype_list.js"></script>
}

<div class="content-header">
    <div class="header-section">
        <h1>
            <i class="gi gi-certificate"></i>Quản Lý Loại Quảng Cáo<br>
            <small>Danh Sách</small>
        </h1>
    </div>
</div>
<ul class="breadcrumb breadcrumb-top">
    <li><a href="../Admin/index"><i class="fa fa-home"></i></a></li>
    <li><a href="../Admin/ListMediatype">Quảng Cáo</a></li>
    <li><a href="../Admin/ListMediatype">Quản Lý</a></li>
</ul>

<div class="tab-content">
    <div id="listmedia-div" class="tab-pane fade in active animation-slideRight">
        <div class="container-fluid">
            <div class="row">
                <div class="pull-right col-md-2" style="margin-left: 10px"><a href="AddMediatype" class="btn btn-block btn-success">Tạo Mới</a></div>
                <div class="dataTables_filter" id="example-datatable_filter">
                    <div class="input-group">
                        <input type="text" data-bind="instantValue: SearchString, event: { keypress: $root.EnterSendMsg }" aria-controls="example-datatable" class="form-control" placeholder="Tìm Kiếm">
                        <span class="input-group-addon" style="cursor: pointer" data-bind="click: $root.SendMsg">
                            <i class="fa fa-search"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div class="container-fluid">
            <div class="row" data-bind="foreach: MediaTypes, visible: Loaded">
                <div class="col-sm-4 col-md-4">
                    <div class="widget">
                        <div class="widget-simple">
                            <a href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background">
                                <img width="32" height="32" data-bind="src: IconPath" />
                            </a>
                            <h4 class="widget-content text-right animation-hatch">
                                <a href="#" class="" data-bind="text: Name"></a>
                            </h4>
                            <h4 class="widget-content text-right animation-hatch">
                                <span class="pull-right" style="margin-left: 2px;"><a href="#editmedia-div" data-bind="click: $root.getEditItem" data-toggle="tab" class="btn btn-xs btn-default">Sửa</a></span>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions form-group">
                <div class="col-md-4 pull-right">
                    <ul class="pager">
                        <li class="prev" data-bind="css: { disabled: IsPrevious() === false }">
                            <a href="#" data-bind="    click: $root.doPrevious">← Trang Trước</a>
                        </li>
                        <li class="next" data-bind="css: { disabled: IsNext() === false }">
                            <a href="#" data-bind="    click: $root.doNext">Trang Sau →</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row" data-bind="hidden: Loaded"><i class="fa fa-asterisk fa-spin fa-4x"></i></div>
    </div>
    <div id="editmedia-div" class="block tab-pane animation-slideRight fade">
        <form class="form-horizontal form-bordered" novalidate="novalidate" id="editmedia-frm" data-bind="submit: $root.doEdit">
            <div class="form-group">
                <label for="val_name" class="col-md-4 control-label">Tên Định Dạng<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" data-bind="value: Name" placeholder="Chứa ít nhất 2 ký tự..." class="form-control" name="val_name" id="val_name">
                        <span class="input-group-addon"><i class="gi gi-nameplate"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="val_prethum" class="col-md-4 control-label">Định Dạng Icon<span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <img id="prethum" height="187" data-bind="src: IconPath" width="300" src="~/Advertise/DefaultAssets/defaultPreview.jpg" alt="Preview Thumbail">
                    <div class="input-group">
                        <input accept="image/*" type="file" data-bind="fileUpload: { property: 'IconPath', url: '/api/AdminCategory/PostCategoryWithIcon' }" class="form-control" name="val_prethum" id="val_prethum">
                        <span class="input-group-addon"><i class="gi gi-playing_dices"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="val_Description" class="col-md-4 control-label">Mô Tả <span class="text-danger">*</span></label>
                <div class="col-md-6">
                    <div class="input-group">
                        <textarea placeholder="mô tả loại quảng cáo" data-bind="value: Description" class="form-control" name="val_Description" id="val_Description" rows="6"></textarea>
                        <span class="input-group-addon"><i class="gi gi-playing_dices"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-actions form-group">
                <div class="col-md-8 col-md-offset-4">
                    <button class="btn btn-sm btn-primary" id="btn_submit" type="submit">Lưu Thay Đổi</button>
                    <a href="#listmedia-div" data-toggle="tab" class="btn btn-sm btn-warning">Danh Sách</a>
                </div>
            </div>
        </form>
    </div>
</div>